{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet"
          href="{% static 'AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}">
    <link rel="stylesheet"
          href="{% static 'AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}">
    <style>
        /* dataTables列内容居中 */
        #example1 > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        #example1 > thead:first-child > tr:first-child > th {
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-lg-12">
            <br>
            <div class="col-sm-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="loginLogStartTime" class="form-control pull-right"
                               data-date-format="yyyy-mm-dd" placeholder="开始时间">
                        <span class="input-group-addon">
										                    <span class="glyphicon glyphicon-calendar"></span>
										                </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="loginLogEndTime" class="form-control pull-right"
                               data-date-format="yyyy-mm-dd" placeholder="结束时间">
                        <span class="input-group-addon" onclick="searchUserLog()">
										                    <span class="glyphicon glyphicon-search"
                                                                  style="cursor: pointer"></span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <!-- /.box -->
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>用户</th>
                            <th>登录主机</th>
                            <th>连接方式</th>
                            <th>远程地址</th>
                            <th>开始时间</th>
                            <th>登录时长</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for result in results %}

                            <tr>
                                <td>{{ result.admin_login_user.username }}</td>
                                <td>{{ result.admin_server }}</td>
                                <td>
                                    <small class="label label-primary"> {{ result.admin_record_mode }}</small>
                                </td>
                                <td>{{ result.admin_remote_ip }}</td>
                                <td>{{ result.admin_start_time }}</td>
                                <td>{{ result.admin_login_status_time }}</td>
                                <td>
                                    {% if result.admin_record_mode in linux_protocols %}
                                        <a onclick="window.open('{% url 'admin_play' result.id %}','newwindow', 'height=500, width=1005, top=200, left=200, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')"
                                           class="btn btn-xs btn-warning btn-replay">回放</a>
                                        <button type="button" class="btn btn-xs btn-info"
                                                data-toggle="modal"
                                                data-target="#modal-cmds"
                                                data-whatever="{{ result.admin_record_cmds }}">查看命令
                                        </button>
                                    {% else %}
                                        <a onclick="window.open('{% url 'admin_play' result.id %}','newwindow')"
                                           class="btn btn-xs btn-warning btn-replay">回放</a>
                                    {% endif %}
                                </td>
                            </tr>

                        {% endfor %}

                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
                <div class="modal fade" id="modal-cmds">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">命令内容</h4>
                            </div>
                            <div class="modal-body" style="overflow: auto;white-space: pre-line;max-height: 500px">

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
            </div>
            <!-- /.box -->
        </div>
    </div>
    <!-- /.row -->

{% endblock %}


{% block js %}
    <!-- DataTables -->
    <script src="{% static 'AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
    <!-- bootstrap datepicker -->
    <script src="{% static 'AdminLTE/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>

    <script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>
    <script>
        $(function () {
            table = $('#example1').DataTable({
                language: {
                   "sProcessing": "处理中...",
                   "sLengthMenu": "显示 _MENU_ 项结果",
                   "sZeroRecords": "没有匹配结果",
                   "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                   "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                   "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                   "sInfoPostFix": "",
                   "sSearch": "快速搜索:",
                   "sUrl": "",
                   "sEmptyTable": "表中数据为空",
                   "sLoadingRecords": "载入中...",
                   "sInfoThousands": ",",
                   "oPaginate": {
                       "sFirst": "首页",
                       "sPrevious": "上页",
                       "sNext": "下页",
                       "sLast": "末页"
                   },
                   "oAria": {
                       "sSortAscending": ": 以升序排列此列",
                       "sSortDescending": ": 以降序排列此列"
                   }
               },
                columnDefs: [{
                    'targets': [-1],
                    'orderable': false
                }],
                "order": [[4, "desc"]]
            });

            //Date picker
            $('#loginLogStartTime, #loginLogEndTime').datepicker({
                autoclose: true
            });
        });

        // 查看命令
        $('#modal-cmds').on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget); // Button that triggered the modal
            let cmds = button.data('whatever'); // Extract info from data-* attributes
            let modal = $(this);
            modal.find('.modal-body').html(cmds);
            modal.scrollTop = modal.scrollHeight;
        });

        // 按日期搜索
        function searchUserLog() {
            let startTime = $('#loginLogStartTime').val();
            let endTime = $('#loginLogEndTime').val();
            if (startTime.length === 0 || endTime.length === 0) {
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '请选择起始时间！'
                });
                return false;
            }
            $.ajax({
                dataType: "JSON",
                url: '{% url 'login_record' %}',
                type: "POST",  //提交类似
                data: {
                    "startTime": startTime,
                    "endTime": endTime,
                },
                success: function (response) {
                    if (response.records.length === 0) {
                        $.alert({
                            title: 'Tips',
                            type: 'red',
                            content: '该时间段内没有任何操作！'
                        });
                    } else {
                        $.alert({
                            title: 'Tips',
                            type: 'green',
                            content: '查询完成！'
                        });
                        table.clear().draw();
                        for (let i = 0; i < response.records.length; i++) {
                            let result = response.records[i];
                            let admin_record_mode = result['admin_record_mode'] === 'ssh' ? '<small class="label label-primary"> ssh</small>' : '<small class="label label-info"> guacamole</small>';
                            let btn = result['admin_record_mode'] === 'ssh' ? '<a onclick="window.open(\'/assets/admin_play/' + result['id'] + '/' + '\',\'newwindow\', \'height=500, width=1005, top=200, left=200, toolbar=no, menubar=no, scrollbars=no, location=no, status=no\')" class="btn btn-xs btn-warning btn-replay">回放</a><button type="button" class="btn btn-xs btn-info" data-toggle="modal" data-target="#modal-cmds" data-whatever="' + result['admin_record_cmds'] + '">查看命令</button>' : '<a onclick="window.open(\'/assets/admin_play/' + result['id'] + '/' + '\',\'newwindow\')" class="btn btn-xs btn-warning btn-replay">回放</a>';
                            table.row.add([
                                result['admin_login_user'],
                                result['admin_server'],
                                admin_record_mode,
                                result['admin_remote_ip'],
                                result['admin_start_time'],
                                result['admin_login_status_time'],
                                btn
                            ]).draw();
                        }
                    }
                },
                error: function (response) {
                    $.alert({
                        title: 'Tips',
                        type: 'red',
                        content: response.responseText
                    });
                }
            })
        }
    </script>

{% endblock %}

